<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			li{
				height:50px;
				line-height:50px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>000</li>
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
			<li>555</li>
		</ul>
		<script>
			//1. 查找到所有的li元素
			var lis=document.getElementsByTagName("li");
			console.log(lis);//0-5
			
			for(var i=0;i<lis.length;i++){
				//console.dir(lis[0]);
				//console.log(i,i%2);
				//隔行变色效果
				//i%2 只要是偶数，余数就是0     %----》取余数  偶数的余数都是0
				if(i%2==0){//偶数---粉色
					lis[i].style.backgroundColor="pink";
				}else{//奇数----黄色
					lis[i].style.backgroundColor="yellow";
				}
				
				//每个元素，鼠标进入
				lis[i].onmouseover=function(){
					//console.log(i);//6
					//console.log(this);//this 你触发事件的元素
					
					//在改变颜色之前，我先创建一个属性，把它的以前颜色存起来
					this.bgColor=this.style.backgroundColor;
					//console.dir(this);
					//修改颜色
					this.style.backgroundColor="red";
				}
				//每个元素，鼠标离开
				lis[i].onmouseout=function(){
					//console.log("鼠标离开");
					//把我以前存放的属性颜色获取
					this.style.backgroundColor=this.bgColor;
				}
			}
			
			console.log(i);//6
		</script>
	</body>
</html>
